{% extends "h:templates/layouts/base.html.jinja2" %}

{% from '../includes/annotation_card.html.jinja2' import annotation_card %}
{% from '../includes/share_widget.html.jinja2' import share_widget %}

{% macro search_result_nav(name) %}
{# This <form> is needed for IE because it doesn't support the `form`
   attribute. See commit message. #}
<form method="GET" action="{{ request.path_url }}">
  <input type="hidden" name="q" value="{{ q }}">
  <nav class="search-result-nav">
    {%- if more_info %}
      <button form="search-bar"
              name="back"
              class="search-result-nav__button">
        {% trans %}Back{% endtrans %}
      </button>
    {% else %}
      <h1 class="search-result-nav__title">{{ name }}</h1>
      <button form="search-bar"
              name="more_info"
              class="search-result-nav__button">
        {% trans %}More info{% endtrans %}
      </button>
    {% endif -%}
  </nav>
</form>
{% endmacro %}

{# Card displaying statistics about a bucket of annotations. #}
{% macro search_bucket_stats(bucket) %}
<div class="search-bucket-stats">
  {% if bucket.uri and bucket.incontext_link(request) %}
    <div class="search-bucket-stats__key">
      {{ svg_icon('up-right-arrow', css_class='search-bucket-stats__icon') }}
      <a class="search-bucket-stats__incontext-link"
         href="{{ bucket.incontext_link(request) }}"
         rel="nofollow noopener"
         target="_blank">
         {% trans %}Visit annotations in context{% endtrans %}
       </a>
    </div>
    <div class="search-bucket-stats__val"></div>
  {% endif %}
  {% if bucket.tags %}
    <h4 title="tags" class="search-bucket-stats__key">
      {{ svg_icon('tag', css_class='search-bucket-stats__icon') }}
      {% trans %}Tags{% endtrans %}
    </h4>
    <ul class="search-bucket-stats__val">
      {% for tag in bucket.tags %}
        <li><a class="link--plain"
               href="{{ tag_link(tag) }}">{{ tag }}</a></li>
      {% endfor %}
    </ul>
  {% endif %}
  <h4 title="annotators" class="search-bucket-stats__key">
    {{ svg_icon('account', css_class='search-bucket-stats__icon') }}
    {% trans %}Annotators{% endtrans %}
  </h4>
  <ul class="search-bucket-stats__val">
    {% for user in bucket.users %}
      <li class="search-bucket-stats__username">
        <a class="link--plain"
           href="{{ user_link(user) }}">{{ username_from_id(user) }}</a>
      </li>
    {% endfor %}
  </ul>
  {% if bucket.uri %}
    <h4 title="url" div class="search-bucket-stats__key">
      {{ svg_icon('link', css_class='search-bucket-stats__icon') }}
      {% trans %}URL{% endtrans %}
    </h4>
    <div class="search-bucket-stats__val search-bucket-stats__url">
        <a class="link--plain"
           rel="nofollow noopener"
           href="{{ bucket.uri }}"
           target="_blank">{{ pretty_link(bucket.uri) }}</a>
    </div>
  {% endif %}
  <div class="u-stretch">
  </div>
  <button class="search-bucket-stats__collapse-view"
          data-ref="collapseView"
          title="Collapse view">
    {{ svg_icon('collapse-view', 'search-bucket-stats__collapse-view-icon') }}
    Collapse view
  </button>
</div>
{% endmacro %}

{#
  A collapsible bucket/group of annotations
#}
{% macro search_result_bucket(bucket) %}
<div class="search-result-bucket js-search-bucket">

  {# The header is the clickable area that expands/collapses the bucket when
     clicked #}
  <div class="search-result-bucket__header" data-ref="header">
    <div class="search-result-bucket__domain">
      <span class="search-result-bucket__domain-text">{{ bucket.domain }}</span>
      <a class="link--plain search-result-bucket__domain-link"
         href="{{ bucket.incontext_link(request) }}"
         rel="nofollow noopener"
         title="Visit annotations in context"
         target="_blank"
         data-ref="domainLink">
         {{ bucket.domain }}
         {{ svg_icon('up-right-arrow', css_class='search-result-bucket__incontext-icon') }}</a>
    </div>
    <div class="search-result-bucket__title-and-annotations-count">
        <a title="expand annotations for this url" data-ref="title" href="#" class="search-result-bucket__title">
        {% if bucket.title %}
            {{ bucket.title }}
        {% else %}
            {% trans %}Untitled document{% endtrans %}
        {% endif %}
        </a>
        <div title="{{ bucket.annotations_count }} annotations added"
             class="search-result-bucket__annotations-count">
          <div class="search-result-bucket__annotations-count-container">
              {{ bucket.annotations_count }}
          </div>
        </div>
    </div>
  </div>

  {# The content is the area that appears / disappears on expand / collapse. #}
  <div class="search-result-bucket__content">
    <div class="search-result-bucket__annotation-cards-container" data-ref="content">
      <ol class="search-result-bucket__annotation-cards">
        {% for result in bucket.presented_annotations %}
          {{ annotation_card(result, request, tag_link) }}
        {% endfor %}
      </ol>
      {{ search_bucket_stats(bucket) }}
    </div>
  </div>
</div>
{% endmacro %}

{% macro tags_section() %}
<section class="search-result-sidebar__section">
  <h3 class="search-result-sidebar__subtitle">
    {% trans %}Top tags{% endtrans %}
    <span class="search-result-sidebar__subtitle-count">
      {{ search_results.aggregations['tags'] | length }}
    </span>
  </h3>
  <div class="search-result-sidebar-tags">
    {% for tag in search_results.aggregations.tags %}
      <button type="submit"
              form="search-bar"
              name="toggle_tag_facet"
              value="{{ tag.tag }}"
              class="search-result-sidebar__tag">
        {#
          Add an extra container element to work around the fact that <button>s
          can't be flex containers in FF51 and earlier:

            https://bugzilla.mozilla.org/show_bug.cgi?id=984869
        #}
        <span class="search-result-sidebar__tag-container">
          {{ tag.tag }}
          <span class="search-result-sidebar__tag-count">
            {{ tag.count | format_number}}
          </span>
        </span>
      </button>
    {% endfor %}
  </div>
</section>
{% endmacro %}

{% macro group_users(title, users, creator) %}
<section class="search-result-sidebar__section">
  <h3 class="search-result-sidebar__subtitle">
    {% trans %} {{title}} {% endtrans %}
    <span class="search-result-sidebar__subtitle-count">
      {{ users|length }}
    <span>
  </h3>
  <ul>
    {% for user in users %}
      <li>
        <button type="submit"
                form="search-bar"
                name="toggle_user_facet"
                value="{{ user.userid }}"
                {% if user.faceted_by %}
                  title="{% trans username=user.username %}Remove {{ username }} from the search query{% endtrans %}"
                {% else %}
                  title="{% trans username=user.username %}Limit the search to annotations by {{ username }}{% endtrans %}"
                {% endif %}
                class="search-result-sidebar__username">
          {{ user.username }}
          <span class="search-result-sidebar__annotations-count">
            {{ user.count | format_number}}
          </span>
          {% if user.userid == creator %}
            <span class="search-result-sidebar__creator">
              creator
            </span>
          {% endif %}
        </button>
      </li>
    {% endfor %}
    </ul>
  </form>
</section>
{% endmacro %}

{% macro sidebar(title, organization) %}
<aside class="search-result-sidebar {%- if not more_info %} search-result-hide-on-small-screens{% endif %}">

  {#- This form element is needed for Internet Explorer because it
      doesn't support the `form` attribute. See commit message. #}
  <form method="GET" action="{{ request.path_url }}">
    <input type="hidden" name="q" value="{{ q }}">
    {% if organization %}
      <div class="search-result-sidebar__organization">
        <span class="search-result-sidebar__org-logo">
          {% if organization.logo %}
            <img src="{{ organization.logo }}" alt="Organization logo" class='search-result-sidebar__logo'></img>
          {% endif %}
        </span>
        <span class="search-result-sidebar__org-name">
          {{ organization.name }}
        </span>
      </div>
    {% endif %}

    <h1 class="search-result-sidebar__title">{{ title }}</h1>

    {{ caller() }}
  </form>
</aside>
{% endmacro %}

{% macro group_sidebar(group, group_edit_url, total, stats) %}
  {% call sidebar(group.name, group.organization) %}

    <section class="search-result-sidebar__section">
      {% if group.description %}
        <div class="search-result-sidebar__subsection">
        {% for paragraph in group.description.split('\n') %}
          <p>{{ paragraph }}</p>
        {% endfor %}
        </div>
      {% endif %}
      <div class="search-result-sidebar__subsection">
        <p class="search-result-sidebar__subsection-p">
          <span class="search-result-sidebar__subsection-key">{% trans %}Annotations:{% endtrans %}</span>
          <span class="search-result-sidebar__subsection-val">{{ stats.annotation_count | format_number}}</span>
        </p>
        <p class="search-result-sidebar__subsection-p">
          <span class="search-result-sidebar__subsection-key">{% trans %}Created:{% endtrans %}</span>
          <span class="search-result-sidebar__subsection-val">{{ group.created }}</span>
        </p>
      </div>
      <div class="search-result-sidebar__subsection">
      {% if group_edit_url %}
        <p class="search-result-sidebar__subsection-p">
          <a class="link"
              href="{{ group_edit_url }}">
             {% trans %}Edit group{% endtrans %}
          </a>
        </p>
      {% endif %}
      {# only show ability to leave group if the logged in user is a member of that group #}
      {% if show_leave_button %}
        <button class="link--btn js-confirm-submit"
                type="submit"
                form="search-bar"
                formmethod="POST"
                name="group_leave"
                value="{{ group.pubid }}"
                data-confirm-message="Are you sure you want to leave the group &quot;{{ group.name }}&quot;?">
          {% trans %}Leave this group{% endtrans %}
        </button>
      {% endif %}
      </div>
    </section>

    {{ tags_section() }}

    {{ group_users(*group_users_args) }}
    <section class="search-result-sidebar__section">
      <h3 class="search-result-sidebar__subtitle">
        {{ group.share_subtitle }}
      </h3>
      <p class="search-result-sidebar__share-link">
        {{ group.share_msg }}
      </p>
      <div class="group-invite__container js-copy-button">
        <input class="group-invite__input js-select-onfocus"
               data-ref="input"
               value="{{ group.url }}">
        <button class="group-invite__clipboard-button"
                data-ref="button"
                title="Copy to clipboard">
          {{ svg_icon('copy_to_clipboard', 'group-invite__clipboard-image') }}
        </button>
      </div>
    </section>
  {% endcall %}
{% endmacro %}

{% macro user_sidebar(user, stats) %}
  {% call sidebar(user.name) %}
    <section class="search-result-sidebar__section">
      {% if user.description %}
        {% for paragraph in user.description.split('\n') %}
          <p>{{ paragraph }}</p>
        {% endfor %}
      {% endif %}

      <div class="search-result-sidebar__subsection">
      {% if stats.annotation_count %}
        <p class="search-result-sidebar__subsection-p">
          <span class="search-result-sidebar__subsection-key">{% trans %}Annotations:{% endtrans %}</span>
          <span class="search-result-sidebar__subsection-val">{{ stats.annotation_count | format_number}}</span>
        </p>
      {% endif %}
        <p class="search-result-sidebar__subsection-p">
          <span class="search-result-sidebar__subsection-key">{% trans %}Joined:{% endtrans %}</span>
          <span class="search-result-sidebar__subsection-val">{{ user.registered_date }}</span>
        </p>
      {%- if user.location %}
        <p class="search-result-sidebar__subsection-p">
          <span class="search-result-sidebar__subsection-key">{% trans %}Location:{% endtrans %}</span>
          <span class="search-result-sidebar__subsection-val">{{ user.location }}</span>
        </p>
      {% endif %}
      {%- if user.uri %}
        <p class="search-result-sidebar__subsection-p">
          <span class="search-result-sidebar__subsection-key">{% trans %}Link:{% endtrans %}</span>
          <span class="search-result-sidebar__subsection-val">
            <a href="{{ user.uri }}" rel="nofollow noopener" class="link--plain">
              {{ pretty_link(user.uri) }}
            </a>
          </span>
        </p>
      {% endif %}
      {%- if user.orcid %}
        <p class="search-result-sidebar__subsection-p">
          <span class="search-result-sidebar__subsection-key">{% trans %}ORCID:{% endtrans %}</span>
          <span class="search-result-sidebar__subsection-val">
            <a href="https://orcid.org/{{ user.orcid }}"
               class="link--plain">
              {{ user.orcid }}
            </a>
          </span>
        </p>
      {% endif %}
      </div>
      <div class="search-result-sidebar__subsection">
      {% if user.edit_url %}
        <p class="search-result-sidebar__subsection-p">
          <a class="link"
             href="{{ user.edit_url }}">
            {% trans %}Edit profile{% endtrans %}
          </a>
        </p>
      {% endif %}
      </div>
    </section>

    {{ tags_section() }}
  {% endcall %}
{% endmacro %}

{% block header %}
  {% from "h:templates/includes/navbar.html.jinja2" import navbar with context %}
  {{ navbar(search=search_results, opts=opts) }}
{% endblock %}

{% block content %}
  <div class="search-result-container">
    {% if group %}
      {{ search_result_nav(group.name) }}
    {% elif user %}
      {{ search_result_nav(user.name) }}
    {% endif %}

    {% if search_results.timeframes %}

      <div class="search-results {%- if more_info %} search-result-hide-on-small-screens{% endif %}">

        {% if q or user or group %}
        <div class="search-results__total"> {{search_results.total | format_number}} <b>{% trans %}Matching Annotations{% endtrans %}</b></div>
        {% endif %}

        <ol class="search-results__list"
            role="list"
            aria-label="Search results grouped by date">
          {% for timeframe in search_results.timeframes %}
          <li class="search-result__timeframe">
            {{ timeframe.label }}
          </li>
          {% for bucket in timeframe.document_buckets.values() %}
          <li role="listitem">
            {{ search_result_bucket(bucket) }}
          </li>
          {% endfor %}
          {% endfor %}
        </ol>

        {% if page.max > 1 %}
          {% include "h:templates/includes/paginator.html.jinja2" %}
        {% endif %}
      </div>
    {% else %}
      <div class="search-result-zero {%- if more_info %} search-result-hide-on-small-screens{% endif %}">
        {% if zero_message == '__SHOW_GETTING_STARTED__' %}
          <div>
            <h2 class="search-result-zero__title">
              {%- trans %}How to get started{% endtrans -%}
            </h2>
            <ol class="search-result-zero__list">
              <li class="search-result-zero__list-item"><!--
                !--><a class="link"
                       href="{{ request.route_url('chrome-extension') }}">
                  {%- trans %}Install our Chrome extension{% endtrans -%}
                </a>
              </li>
              <li class="search-result-zero__list-item">
                {%- trans url=request.route_url('activity.search') -%}
                  Check out some of the
                  <a class="link" href="{{ url }}">
                    recently annotated documents
                  </a>
                {%- endtrans -%}
              </li>
              <li class="search-result-zero__list-item">
                {%- trans url=user.edit_url -%}
                  Let other users know more about you by
                  <a class="link" href="{{ url }}">
                    adding more information to your profile
                  </a>
                {%- endtrans -%}
              </li>
              <li class="search-result-zero__list-item">
                {%- trans -%}
                  Read more about
                  <a class="link" href="https://hypothes.is/annotating-with-groups/">
                    how to annotate with groups
                  </a>
                {%- endtrans -%}
              </li>
            </ol>
          </div>
        {% else %}
          <strong>{{ zero_message }}</strong>
        {% endif %}
      </div>
    {% endif %}

    {% if group %}
      {{ group_sidebar(group, group_edit_url, search_results.total, stats) }}
    {% elif user %}
      {{ user_sidebar(user, stats) }}
    {% endif %}

    <div class="js-share-widget is-hidden-when-loading">
      {{ share_widget() }}
    </div>
  </div>
{% endblock %}

{% block footer %}
  {% include "h:templates/includes/footer.html.jinja2" %}
{% endblock %}
